<template>
  <div class="navbar-container">
    <el-menu
      mode="horizontal"
      :router="true"
      class="nav-menu"
      :default-active="currentPath"
    >
      <el-menu-item index="/">
        <div class="nav-item">
          <span class="nav-text">首页</span>
          <div class="nav-indicator" :class="{'active': isActive('/')}"></div>
        </div>
      </el-menu-item>
      <el-menu-item index="/opportunity">
        <div class="nav-item">
          <span class="nav-text">机会</span>
          <div class="nav-indicator" :class="{'active': isActive('/opportunity')}"></div>
        </div>
      </el-menu-item>
      <el-menu-item index="/share">
        <div class="nav-item">
          <span class="nav-text">分享</span>
          <div class="nav-indicator" :class="{'active': isActive('/share')}"></div>
        </div>
      </el-menu-item>
      <el-menu-item index="/ai">
        <div class="nav-item">
          <span class="nav-text">AI助手</span>
          <div class="nav-indicator" :class="{'active': isActive('/ai')}"></div>
        </div>
      </el-menu-item>
      <el-menu-item index="/profile">
        <div class="nav-item">
          <span class="nav-text">我的</span>
          <div class="nav-indicator" :class="{'active': isActive('/profile')}"></div>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { computed, watch, ref, onMounted } from 'vue';

const route = useRoute();

// 获取当前路径的计算属性，用于设置导航菜单激活项
const currentPath = computed(() => {
  // 检查当前路径是否以特定路径开头
  if (route.path.startsWith('/share')) {
    return '/share';
  }
  if (route.path.startsWith('/opportunity')) {
    return '/opportunity';
  }
  if (route.path.startsWith('/ai')) {
    return '/ai';
  }
  if (route.path.startsWith('/profile')) {
    return '/profile';
  }
  return route.path;
});

// 检查路径是否匹配当前路由，用于显示指示器
const isActive = (path) => {
  if (path === '/') {
    return route.path === '/';
  }
  return route.path.startsWith(path);
};

// 添加动画状态追踪
const activeTransition = ref(false);

// 监听路由变化添加动画效果
watch(route, () => {
  activeTransition.value = true;
  setTimeout(() => {
    activeTransition.value = false;
  }, 400); // 动画持续时间
});

// 页面加载时触发一次动画
onMounted(() => {
  activeTransition.value = true;
  setTimeout(() => {
    activeTransition.value = false;
  }, 400);
});
</script>

<style scoped>
.navbar-container {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
}

.nav-menu {
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: none;
  height: 64px;
  display: flex;
  justify-content: center;
}

:deep(.el-menu-item) {
  font-size: 16px;
  color: #606266;
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-menu-item:hover) {
  color: #4d7cfe;
  background-color: rgba(77, 124, 254, 0.05);
}

:deep(.el-menu-item.is-active) {
  color: #4d7cfe !important;
  font-weight: 600;
  background-color: rgba(77, 124, 254, 0.08);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.nav-text {
  transition: all 0.3s ease;
  position: relative;
  padding: 0 4px;
}

.nav-indicator {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  height: 3px;
  width: 100%;
  background: linear-gradient(to right, #4d7cfe, #6a95fe);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
  border-radius: 3px;
  opacity: 0;
}

.nav-indicator.active {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
  box-shadow: 0 1px 8px rgba(77, 124, 254, 0.5);
  animation: pulse 2s infinite;
}

:deep(.el-menu-item:hover) .nav-indicator {
  opacity: 0.5;
  transform: translateX(-50%) scaleX(0.5);
}

:deep(.el-menu-item.is-active) {
  color: #4d7cfe !important;
  font-weight: 600;
  background-color: rgba(77, 124, 254, 0.08);
}

:deep(.el-menu-item.is-active) .nav-text {
  transform: translateY(-2px);
  color: #4d7cfe !important;
}

/* 添加呼吸动画效果 */
@keyframes pulse {
  0% { box-shadow: 0 0 0 rgba(77, 124, 254, 0.5); }
  50% { box-shadow: 0 0 10px rgba(77, 124, 254, 0.8); }
  100% { box-shadow: 0 0 0 rgba(77, 124, 254, 0.5); }
}

/* 确保Element Plus的默认下划线被禁用 */
:deep(.el-menu--horizontal>.el-menu-item.is-active) {
  border-bottom: none !important;
}

:deep(.el-menu--horizontal>.el-menu-item) {
  border-bottom: none !important;
}
</style>